<template>
  <div class="mod-config">
    <el-steps :active="activeStep" finish-status="success" align-center>
      <el-step title="基本信息"></el-step>
      <el-step title="商品属性"></el-step>
      <el-step title="销售属性"></el-step>
      <el-step title="SKU信息"></el-step>
      <el-step title="保存完成"></el-step>
    </el-steps>

    <!-- 步骤一:基本信息 -->
    <el-form v-show="activeStep === 0" :model="baseForm" :rules="baseRules" ref="baseForm" label-width="120px">
      <el-form-item label="商品名称" prop="name">
        <el-input v-model="baseForm.name" placeholder="请输入商品名称"></el-input>
      </el-form-item>
      <el-form-item label="商品描述" prop="description">
        <el-input type="textarea" v-model="baseForm.description" placeholder="请输入商品描述"></el-input>
      </el-form-item>
      <el-form-item label="商品分类" prop="categoryId">
        <el-cascader v-model="baseForm.categoryId" :options="categoryOptions" placeholder="请选择商品分类"></el-cascader>
      </el-form-item>
      <el-form-item label="商品品牌" prop="brandId">
        <el-select v-model="baseForm.brandId" placeholder="请选择品牌">
          <el-option v-for="item in brandOptions" :key="item.value" :label="item.label" :value="item.value">
          </el-option>
        </el-select>
      </el-form-item>
      <el-form-item>
        <el-button type="primary" @click="nextStep('baseForm')">下一步，填写商品属性</el-button>
      </el-form-item>
    </el-form>

    <!-- 步骤二:商品属性 -->
    <div v-show="activeStep === 1">
      <el-form :model="attrForm" ref="attrForm" label-width="120px">
        <el-form-item v-for="(attr, index) in attrForm.attrs" :key="index" :label="attr.name">
          <el-select v-model="attr.value" placeholder="请选择属性值">
            <el-option v-for="val in attr.values" :key="val" :label="val" :value="val"></el-option>
          </el-select>
        </el-form-item>
        <el-form-item>
          <el-button @click="prevStep">上一步，选择商品基本信息</el-button>
          <el-button type="primary" @click="nextStep('attrForm')">下一步，填写销售属性</el-button>
        </el-form-item>
      </el-form>
    </div>

    <!-- 步骤三:销售属性 -->
    <div v-show="activeStep === 2">
      <el-form :model="saleAttrForm" ref="saleAttrForm" label-width="120px">
        <div v-for="(attr, index) in saleAttrForm.attrs" :key="index">
          <el-form-item :label="attr.name">
            <el-checkbox-group v-model="attr.selectedValues">
              <el-checkbox v-for="val in attr.values" :key="val" :label="val"></el-checkbox>
            </el-checkbox-group>
          </el-form-item>
        </div>
        <el-form-item>
          <el-button @click="prevStep">上一步，填写商品属性</el-button>
          <el-button type="primary" @click="nextStep('saleAttrForm')">下一步，设置SKU信息</el-button>
        </el-form-item>
      </el-form>
    </div>

    <!-- 步骤四:SKU信息 -->
    <div v-show="activeStep === 3">
      <el-table :data="skuList" border>
        <el-table-column v-for="attr in saleAttrForm.attrs" :key="attr.name" :label="attr.name" :prop="attr.name">
        </el-table-column>
        <el-table-column label="售价">
          <template slot-scope="scope">
            <el-input v-model="scope.row.price" type="number"></el-input>
          </template>
        </el-table-column>
        <el-table-column label="库存">
          <template slot-scope="scope">
            <el-input v-model="scope.row.stock" type="number"></el-input>
          </template>
        </el-table-column>
      </el-table>
      <div class="button-group">
        <el-button @click="prevStep">上一步，设置销售属性</el-button>
        <el-button type="primary" @click="nextStep('skuForm')">下一步，完成</el-button>
      </div>
    </div>

    <!-- 步骤五:完成 -->
    <div v-show="activeStep === 4" class="success-info">
      <i class="el-icon-success"></i>
      <h2>商品添加成功!</h2>
      <div class="button-group">
        <el-button @click="prevStep">上一步，设置SKU信息</el-button>
        <el-button type="success" @click="finish">完成</el-button>
      </div>
    </div>
  </div>
</template>

<script>
export default {
  data() {
    return {
      activeStep: 0,
      baseForm: {
        name: '',
        description: '',
        categoryId: [],
        brandId: ''
      },
      baseRules: {
        name: [{ required: true, message: '请输入商品名称', trigger: 'blur' }],
        categoryId: [{ required: true, message: '请选择商品分类', trigger: 'change' }],
        brandId: [{ required: true, message: '请选择商品品牌', trigger: 'change' }]
      },
      categoryOptions: [],
      brandOptions: [],
      attrForm: {
        attrs: []
      },
      saleAttrForm: {
        attrs: []
      },
      skuList: []
    }
  },
  methods: {
    // 下一步
    nextStep(formName) {
      if (formName) {
        this.$refs[formName].validate((valid) => {
          if (valid) {
            this.activeStep++
          } else {
            return false
          }
        })
      } else {
        this.activeStep++
      }
    },
    // 上一步
    prevStep() {
      this.activeStep--
    },
    // 完成
    finish() {
      this.$confirm('确认提交商品信息?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(() => {
        // TODO: 调用保存接口
        this.$message({
          type: 'success',
          message: '商品添加成功!'
        })
      }).catch(() => {
        this.$message({
          type: 'info',
          message: '已取消提交'
        })
      })
    },
    // 获取分类数据
    getCategoryData() {
      // TODO: 调用接口获取分类数据
    },
    // 获取品牌数据
    getBrandData() {
      // TODO: 调用接口获取品牌数据
    }
  },
  created() {
    this.getCategoryData()
    this.getBrandData()
  }
}
</script>

<style scoped>
.mod-config {
  padding: 20px;
}

.el-steps {
  margin-bottom: 40px;
}

.button-group {
  margin-top: 20px;
  text-align: center;
}

.success-info {
  text-align: center;
  padding: 40px 0;
}

.success-info i {
  font-size: 60px;
  color: #67C23A;
}

.success-info h2 {
  margin-top: 20px;
  color: #67C23A;
}

.el-form-item {
  margin-bottom: 22px;
}
</style>
